<template>
    <div class="login" v-if="getIsShowSate">
        <div class="title flex justify-between">
            <span>登录</span>
            <span @click="hideLogin">x</span>
        </div>
        <div class="content flex flex-column">
            <input type="text" v-model="username" placeholder="请输入用户名">
            <input type="password" v-model="password" placeholder="请输入密码">
            <button @click="goLogin">登录</button>
        </div>
    </div>
</template>

<script>
import {mixinLogin} from './../mixin/mixin_login'
import requset from './../network/request'
export default {
    name:'Login',
    mixins:[mixinLogin],
    data() {
        return {
            username:'',
            password:''
        }
    },
    methods:{
        goLogin(){
            // 登录
            requset({
                url:'login',
                method:'post',
                // params:{email:'cheerqjy@163.com',password:'198919qjy'}
                params:{email:this.username,password:this.password}

            })
            .then(res=>{
                // console.log(res,777);
                localStorage.setItem('userInfo',JSON.stringify(res.data))
                this.$store.commit("setUserInfo",JSON.parse(localStorage.userInfo))
                this.hideLogin()
                
            })
        },
        hideLogin(){
            this.$store.commit('hideCpn','isShowLogin')
        }
    }
}
</script>

<style lang="scss" scoped>
    .login{
        width: 530px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 9;
        box-shadow: 0 0 10px #333;
        .title{
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            color: #fff;
            background: #333;
        }
        .content{
            padding: 10px;
            background: #fff;
            input{
                height: 30px;
                margin-top: 10px;
                border: none;
                outline: none;
                border-bottom: 1px solid #dedede;
            }
            button{
                height: 30px;
                margin-top: 10px;
                border: none;
            }
        }
    }
</style>